<template>
  <div>
    <el-row class="sss">
      <el-button type="text" @click="goLogin">登录</el-button>
      <el-button type="text">注册</el-button>
      <el-dialog title="登录" v-model="dialogFormVisible" width="30%">
        <el-form :model="form">
          <el-form-item>
            <el-input
              v-model="form.name"
              autocomplete="off"
              placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
              v-model="form.pwd"
              autocomplete="off"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>
        </el-form>
        <template v-slot:footer>
          <div class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="goLogin">登 录</el-button>
          </div>
        </template>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  name: "GuestBox",
  data() {
    return {
      dialogFormVisible: false,
      form: {
        name: "",
        pwd: "",
      },
    };
  },
  methods: {
    ...mapMutations(['SET_TOKEN']),
    goLogin() {
      const loginUrl =
        "http://auth-spring-cloud.me/oauth2/authorize?client_id=my-client&response_type=code&redirect_uri=https://chins-blog.me/code-redirect";
      window.open(
        loginUrl,
        "newwindow",
        "height=360, width=500, top=0, left=0, toolbar=no, scrollbar=no, status=no"
      );
      // let token =
      //   "eyJjbGllbnQtaWQiOiJteS1jbGllbnQiLCJhbGciOiJSUzI1NiIsImtpZCI6IjRlZGYyMTlmLTQwNWEtNDk1My1iYTAzLTI3ZDk4YmUzMjYzMSJ9.eyJzdWIiOiJ6aGFuZ3NhbiIsImF1ZCI6Im15LWNsaWVudCIsIm5iZiI6MTY0MTYxMjYyMCwicm9sZXMiOlsiUk9MRV9BRE1JTiJdLCJpc3MiOiJodHRwOlwvXC9hdXRoLXNwcmluZy1jbG91ZC5tZSIsInVuIjoiemhhbmdzYW4iLCJleHAiOjE2NDE2MTI5MjAsImlhdCI6MTY0MTYxMjYyMH0.Hk6eeiFk1UXayBeBwklebaJBIoE0RwdgolyrTaOI-2WTgeI-0o44mV-j7NXyAj2sJT6q2J9Cl_tqh0AlAgyG4jC6oR7N4VYHfnJVPcNTBrgZxvgCVrJ9HL9H40jsbQXnCneC_681Pf-gnUd4nRZ1PqTE236Lg-hwQvXleQTJLmvLJQTVBoJnY7CV5wSEjKlf104GlUp6IJm5LG7zakImKojSP2iY8VhhQog1SNtKA23KyVS4nxfn_cxsoycuKOOPGXJ4kW_6wN6fWaF2CU10mWUUZRaKRoaQeIN6TP1OV_oiYylYHlkecHOlTWaub_nQGqvbNb7aWPphT6d6Ee1XsA";
      window.addEventListener("message", (event) => {
        console.log(event.data);
        let tokenObj = JSON.parse(event.data);
        let token = tokenObj.access_token
        console.log(token);
        this.SET_TOKEN(token)
      });
    },
  },
};
</script>

<style scoped>
.sss {
  line-height: 66px;
}
</style>